<template>
	<div class="navcContainer">
		<div class="basenav">
			<div v-if="is_admin" class="btn_basenav">
				<el-button type="primary" size="mini" @click="addBaseNav(1)">新增</el-button>
			</div>
			<div class="tableContainer">
				<el-table :data="searchs1(search1)" v-loading="loading1" style="width: 100%" max-height="500">
					<el-table-column prop="nav_name" label="一级菜单" width="180">
						<template slot-scope="scope">
							<div @click.prevent="get_snav_list(scope.row,scope.$index)" class="basenav_name">
								<span>
									<i :class="scope.row.nav_icon.icon"></i>
								</span>
								<span style="margin-left:6px;">{{scope.row.nav_name}}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column width="140">
						<template slot="header" slot-scope="scope">
							<div style="display:flex;">
								<span style="dispaly:none">{{scope.row}}</span>
								<el-input v-model="search1" size="mini" placeholder="输入菜单名搜索" />
							</div>
						</template>
						<template slot-scope="scope">
							<el-button
								v-if="is_admin"
								type="primary"
								size="mini"
								@click="handleEdit1(scope.$index, scope.row)"
							>编辑</el-button>

							<el-popover v-if="is_admin" placement="top" width="160" v-model="scope.row.color">
								<p>确定删除吗？</p>
								<div style="text-align: right; margin: 0">
									<el-button size="mini" type="text" @click="scope.row.color = false">取消</el-button>
									<el-button type="primary" size="mini" @click="remove_base_nav(scope.row,scope.$index)">确定</el-button>
								</div>
								<el-button slot="reference" size="mini" type="danger">删除</el-button>
							</el-popover>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<div class="snav">
			<div v-if="is_admin" class="btn_basenav">
				<el-button type="primary" size="mini" @click="add_snav">新增</el-button>
				<span
					v-show="select_base_nav.name==null?false:true"
					style="margin-left:8px;"
				>{{select_base_nav.name}} -- 子菜单</span>
			</div>
			<div class="tableContainer">
				<el-table :data="searchs2(search2)" v-loading="loading2" style="width: 100%" max-height="500">
					<el-table-column prop="snav_name" label="二级菜单" width="180">
						<template slot-scope="scope">
							<div @click="get_tnav_list(scope.row,scope.$index)" class="basenav_name">
								<span>
									<i :class="scope.row.icon_name"></i>
								</span>
								<span style="margin-left:6px;">{{scope.row.snav_name}}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column width="140">
						<template slot="header" slot-scope="scope">
							<div style="display:flex;">
								<span style="dispaly:none">{{scope.row}}</span>
								<el-input v-model="search2" size="mini" placeholder="输入菜单名搜索" />
							</div>
						</template>
						<template slot-scope="scope">
							<el-button
								v-if="is_admin"
								type="primary"
								size="mini"
								@click="handleEdit2(scope.$index, scope.row)"
							>编辑</el-button>

							<el-popover v-if="is_admin" placement="top" width="160" v-model="scope.row.color">
								<p>确定删除吗？</p>
								<div style="text-align: right; margin: 0">
									<el-button size="mini" type="text" @click="scope.row.color = false">取消</el-button>
									<el-button type="primary" size="mini" @click="remove_snav(scope.row,scope.$index)">确定</el-button>
								</div>
								<el-button
									slot="reference"
									size="mini"
									type="danger"
								>删除</el-button>
							</el-popover>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<div class="tnav">
			<div v-if="is_admin" class="btn_basenav">
				<el-button type="primary" size="mini" @click="add_tnav">新增</el-button>
				<span
					v-show="select_snav.name==null?false:true"
					style="margin-left:8px;"
				>{{select_snav.name}} -- 子菜单</span>
			</div>
			<div class="tableContainer">
				<el-table :data="searchs3(search3)" v-loading="loading3" style="width: 100%" max-height="500">
					<el-table-column prop="tnav_name" label="三级菜单" width="180">
						<template slot-scope="scope">
							<div class="basenav_name">
								<span>
									<i :class="scope.row.icon_name"></i>
								</span>
								<span style="margin-left:6px;">{{scope.row.tnav_name}}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="姓名" width="140">
						<template slot="header" slot-scope="scope">
							<div style="display:flex;">
								<span style="dispaly:none">{{scope.row}}</span>
								<el-input v-model="search3" size="mini" placeholder="输入菜单名搜索" />
							</div>
						</template>
						<template slot-scope="scope">
							<el-button
								v-if="is_admin"
								type="primary"
								size="mini"
								@click="handleEdit3(scope.$index, scope.row)"
							>编辑</el-button>

							<el-popover v-if="is_admin" placement="top" width="160" v-model="scope.row.color">
								<p>确定删除吗？</p>
								<div style="text-align: right; margin: 0">
									<el-button size="mini" type="text" @click="scope.row.color = false">取消</el-button>
									<el-button type="primary" size="mini" @click="remove_tnav(scope.row,scope.$index)">确定</el-button>
								</div>
								<el-button
									slot="reference"
									size="mini"
									type="danger"
								>删除</el-button>
							</el-popover>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>

		<!-- 新增&&编辑 主菜单弹框 -->
		<el-dialog
			title="菜单操作"
			:before-close="handleClose"
			:visible.sync="show_add_basenav"
			width="38%"
			center
		>
			<el-form
				:model="basevan_form"
				status-icon
				:rules="rules_basenav"
				ref="show_add_basenav"
				label-width="80px"
				class="demo-ruleForm"
			>
				<el-form-item label="菜单名" prop="nav_name">
					<el-input type="text" v-model="basevan_form.nav_name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="图标" prop="nav_icon">
					<el-select
						v-model="basevan_form.nav_icon"
						suffix-icon="el-icon-date"
						filterable
						placeholder="请选择"
					>
						<el-option v-for="item in icons" :key="item.value" :label="item.label" :value="item.value">
							<span style="float: left">
								<i :class="item.label"></i>
							</span>
							<span style="float: right; color: #8492a6; font-size: 13px">{{ item.belong }}</span>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<div class="btns">
						<el-button size="small" type="success" @click="save_base_nav('show_add_basenav')">保存</el-button>
						<!-- <el-button size="small" type="danger" @click="resetForm('ruleForm')">重置</el-button> -->
					</div>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		var validatenav_name = (rule, value, callback) => {
			if (value === "") {
				callback(new Error("请输入菜单名"));
			} else {
				if (value.length > 8) {
					callback(new Error("菜单名不能超过8个字符"));
				} else {
					callback();
				}
			}
		};
		var validatenav_icon = (rule, value, callback) => {
			if (value === "") {
				callback(new Error("请选择图标"));
			} else {
				callback();
			}
		};
		return {
			basenavList: [],
			snavList: [],
			tnavList: [],
			icons: [],
			loading1: false,
			loading2: false,
			loading3: false,
			is_admin: false,
			show_add_basenav: false,
			add_base_nav_flag: false, // 主菜单编辑或新增标识
			add_snav_flag:false,
			check_basemav_id: null,
			chech_snav_is:null,
			chech_tnav_id:null,
			nav_flag: null,
			add_tnav_flag:false,
			select_base_nav: { id: null, name: null },
			select_snav:{ id: null, name: null },
			baceNavObj:null,
			snavObj:null,
			search1: "",
			search2: "",
			search3: "",
			basevan_form: {
				nav_name: "",
				nav_icon: ""
			},
			rules_basenav: {
				nav_name: [
					{
						validator: validatenav_name,
						trigger: "blur"
					}
				],
				nav_icon: [
					{
						validator: validatenav_icon,
						trigger: "blur"
					}
				]
			}
		};
	},
	methods: {
		// 搜索功能
		searchs1(kw) {
			let searchingList = [];
			this.basenavList.forEach(item => {
				if (item.nav_name.indexOf(kw) != -1) {
					searchingList.push(item);
				}
			});
			return searchingList;
		},
		// 搜索功能
		searchs2(kw) {
			let searchingList = [];
			this.snavList.forEach(item => {
				if (item.snav_name.indexOf(kw) != -1) {
					searchingList.push(item);
				}
			});
			return searchingList;
		},
		// 搜索功能
		searchs3(kw) {
			let searchingList = [];
			this.tnavList.forEach(item => {
				if (item.tnav_name.indexOf(kw) != -1) {
					searchingList.push(item);
				}
			});
			return searchingList;
		},
		// 获取可供选择的icons
		get_icons() {
			this.$ajax.get("/icon").then(res => {
				// console.log(res.data)
				if (res.data.length > 0) {
					res.data.forEach(item => {
						let obj = {
							value: item.pk,
							label: item.icon,
							belong: item.icon_belong
						};
						this.icons.push(obj);
					});
				} else {
					this.$message({
						message: "暂无数据",
						type: "info"
					});
				}
			});
		},
		// 获取主菜单
		get_basenav() {
			this.$ajax.get("/nav").then(res => {
				this.snavList = [];
				this.tnavList = [];
				if (res.data.results.length > 0) {
					this.basenavList = res.data.results;
				} else {
					this.$message({
						message: "暂无数据",
						type: "info"
					});
				}
				let that = this;
				setTimeout(function() {
					that.loading1 = false;
				}, 200);
			});
		},
		// 获取二级菜单那
		get_snav_list(item, index) {
			this.baceNavObj = item;
			this.select_base_nav.name = item.nav_name;
			this.select_base_nav.id = item.pk;
			// this.select_base_nav = {neme:item.nav_name,id:item.pk};
			this.loading2 = true;
			this.$ajax.get(`/snav?parentid=${item.pk}`).then(res => {
				this.tnavList = [];
				this.snavList = [];
				if (res.data.results.length > 0) {
					this.snavList = res.data.results;
				} else {
					this.$message({
						message: "暂无数据",
						type: "info"
					});
				}
				let that = this;
				setTimeout(function() {
					that.loading2 = false;
				}, 200);
			});
		},
		// 获取三级菜单那t
		get_tnav_list(item, index) {
			this.loading3 = true;
			this.snavObj = item;
			console.log(item.nav_name + '' + item.pk)
			this.select_snav.name = item.snav_name;
			this.select_snav.id = item.pk;
			this.$ajax.get(`/tnav?parentid=${item.pk}`).then(res => {
				this.tnavList = [];
				if (res.data.results.length > 0) {
					this.tnavList = res.data.results;
				} else {
					this.$message({
						message: "暂无数据",
						type: "info"
					});
				}
				let that = this;
				setTimeout(function() {
					that.loading3 = false;
				}, 200);
			});
		},
		// 新增主菜单
		addBaseNav(num) {
			this.show_add_basenav = true;
			this.add_base_nav_flag = true;
			this.nav_flag = num;
		},
		handleClose(done) {
			this.$confirm("确认关闭？")
				.then(_ => {
					// this.resetForm("ruleForm");
					done();
				})
				.catch(_ => {});
		},
		// 提交主菜单表单
		save_base_nav(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					if (this.nav_flag == 1) {
						// 主菜单操作
						if (this.add_base_nav_flag) {
							this.confirm_add_basenav("add", 1);
						} else {
							this.confirm_add_basenav("edit", 1);
						}
					} else if (this.nav_flag == 2) {
						// 二级菜单操作
						if(this.add_snav_flag){
							this.confirm_add_basenav("add", 2);
						}else{
							this.confirm_add_basenav("edit", 2);
						}
					} else if (this.nav_flag == 3) {
						// 三级菜单操作
						if(this.add_tnav_flag){
							this.confirm_add_basenav("add", 3);
						}else{
							this.confirm_add_basenav("edit", 3);
						}
					}
				} else {
					return false;
				}
			});
		},
		// 保存新增主菜单
		confirm_add_basenav(flag, num) {
			if (num == 1) {
				if (flag == "add") {
					this.$ajax
						.post("/nav/", {
							nav_name: this.basevan_form.nav_name,
							nav_icon: this.basevan_form.nav_icon
						})
						.then(res => {
							this.$message({
								message: "操作成功,刷新页面查看效果！",
								type: "success"
							});
							this.get_basenav();
							this.show_add_basenav = false;
						})
						.catch(err => {
							this.$message({
								message: "操作失败!",
								type: "warning"
							});
						});
				} else if (flag == "edit") {
					this.$ajax
						.put("/nav/" + this.check_basemav_id + "/", {
							nav_name: this.basevan_form.nav_name,
							nav_icon: this.basevan_form.nav_icon
						})
						.then(res => {
							this.$message({
								message: "操作成功,刷新页面查看效果！",
								type: "success"
							});
							this.get_basenav();
							this.show_add_basenav = false;
						})
						.catch(err => {
							this.$message({
								message: "操作失败!",
								type: "warning"
							});
						});
				}
			}else if(num == 2){
				if(flag == 'add'){
					this.$ajax
						.post("/snav/", {
							snav_name: this.basevan_form.nav_name,
							snav_icon: this.basevan_form.nav_icon,
							parannav:this.select_base_nav.id
						})
						.then(res => {
							this.$message({
								message: "操作成功,刷新页面查看效果！",
								type: "success"
							});
							this.get_snav_list(this.baceNavObj,2);
							this.show_add_basenav = false;
						})
						.catch(err => {
							this.$message({
								message: "操作失败!",
								type: "warning"
							});
						});
				}else if(flag == 'edit'){
					this.$ajax
						.put("/snav/" + this.chech_snav_is + "/", {
							snav_name: this.basevan_form.nav_name,
							snav_icon: this.basevan_form.nav_icon,
							parannav:this.baceNavObj.pk
						})
						.then(res => {
							this.$message({
								message: "操作成功,刷新页面查看效果！",
								type: "success"
							});
							this.get_snav_list(this.baceNavObj,2);
							this.show_add_basenav = false;
						})
						.catch(err => {
							this.$message({
								message: "操作失败!",
								type: "warning"
							});
						});
				}
			}else if(num == 3){
				if(flag == 'add'){
					this.$ajax
						.post("/tnav/", {
							tnav_name: this.basevan_form.nav_name,
							tnav_icon: this.basevan_form.nav_icon,
							parannav:this.select_snav.id
						})
						.then(res => {
							this.$message({
								message: "操作成功,刷新页面查看效果！",
								type: "success"
							});
							this.get_tnav_list(this.snavObj,2);
							this.show_add_basenav = false;
						})
						.catch(err => {
							this.$message({
								message: "操作失败!",
								type: "warning"
							});
						});
				}else if(flag == 'edit'){
					this.$ajax
						.put("/tnav/" + this.chech_tnav_id + "/", {
							tnav_name: this.basevan_form.nav_name,
							tnav_icon: this.basevan_form.nav_icon,
							parannav:this.select_snav.id
						})
						.then(res => {
							this.$message({
								message: "操作成功,刷新页面查看效果！",
								type: "success"
							});
							this.get_tnav_list(this.snavObj,2);
							this.show_add_basenav = false;
						})
						.catch(err => {
							this.$message({
								message: "操作失败!",
								type: "warning"
							});
						});
				}
			}
		},
		// 删除主菜单
		remove_base_nav(item, index) {
			this.$ajax
				.delete("/nav/" + item.pk)
				.then(res => {
					this.$message({
						message: "操作成功,刷新页面查看效果！",
						type: "success"
					});
					this.basenavList.splice(index, 1);
				})
				.catch(err => {
					this.$message({
						message: "操作失败!",
						type: "info"
					});
				});
		},
		// 删除二级菜单
		remove_snav(item,index){
			this.$ajax
				.delete("/snav/" + item.pk)
				.then(res => {
					this.$message({
						message: "操作成功,刷新页面查看效果！",
						type: "success"
					});
					this.snavList.splice(index, 1);
				})
				.catch(err => {
					this.$message({
						message: "操作失败!",
						type: "info"
					});
				});
		},	
		// 删除三级菜单
		remove_tnav(item,index){
			this.$ajax
				.delete("/tnav/" + item.pk)
				.then(res => {
					this.$message({
						message: "操作成功,刷新页面查看效果！",
						type: "success"
					});
					this.tnavList.splice(index, 1);
				})
				.catch(err => {
					this.$message({
						message: "操作失败!",
						type: "info"
					});
				});
		},
		// 编辑主菜单
		handleEdit1(index, item) {
			this.show_add_basenav = true;
			this.basevan_form.nav_name = item.nav_name;
			this.basevan_form.nav_icon = item.nav_icon.pk;
			this.add_base_nav_flag = false;
			this.check_basemav_id = item.pk;
			this.nav_flag = 1;
		},
		// 编辑二级菜单
		handleEdit2(index,item){
			this.nav_flag = 2;
			this.add_snav_flag = false;
			this.show_add_basenav = true;
			this.basevan_form.nav_name = item.snav_name;
			this.basevan_form.nav_icon = item.snav_icon;
			this.chech_snav_is = item.pk;
		},
		// 编辑三级菜单
		handleEdit3(index,item){
			this.nav_flag = 3;
			this.add_tnav_flag = false;
			this.show_add_basenav = true;
			this.basevan_form.nav_name = item.tnav_name;
			this.basevan_form.nav_icon = item.tnav_icon;
			this.chech_tnav_id = item.pk;
		},
		// 新增二级菜单
		add_snav() {
			if (this.select_base_nav.id) {
				this.nav_flag = 2;
				this.add_snav_flag = true;
				this.show_add_basenav = true;
			} else {
				this.$message({
					message: "请选择需要新增的主菜单!",
					type: "warning"
				});
			}
		},
		// 新增三级菜单
		add_tnav(){
			if (this.select_snav.id) {
				this.nav_flag = 3;
				this.add_tnav_flag = true;
				this.show_add_basenav = true;
			} else {
				this.$message({
					message: "请选择需要新增的二级菜单!",
					type: "warning"
				});
			}
		}
	},
	mounted() {
		this.get_icons();
		this.user_infos = JSON.parse(window.localStorage.getItem("user"));
		if (this.user_infos.groups.length > 0) {
			this.user_infos.groups.forEach(item => {
				if (item.name == "管理员") {
					this.is_admin = true;
					return false;
				}
			});
		}
		this.loading1 = true;
		this.get_basenav();
	}
};
</script>


<style lang="scss" scoped>
.navcContainer {
	display: flex;
	justify-content: space-around;
	padding: 10px;
	.basenav {
		// width: 30%;
		.basenav_name {
			cursor: pointer;
		}
	}
	.snav {
		// width: 30%;
		.basenav_name {
			cursor: pointer;
		}
	}
	// .tnav {
	// 	// width: 30%;
	// }
}
.el-select {
	width: 100%;
}
</style>